<template>
  <div class="reserve-wrap">
    <reserve-header></reserve-header>
    <van-pull-refresh v-model="isLoading"
                      @refresh="onRefresh"
                      class="pull"
                      :disabled="disabled">
      <reserve-list :list="reserveList"
                    @refresh="handlerrefresh"></reserve-list>
    </van-pull-refresh>
    <common-skip></common-skip>
    <router-view></router-view>
  </div>
</template>

<script>
import CommonSkip from 'common/skip/Skip'
import ReserveList from './components/List'
import ReserveHeader from './components/Header'
export default {
  name: 'Reserve',
  components: {
    CommonSkip,
    ReserveList,
    ReserveHeader
  },
  data () {
    return {
      title: '我的预约',
      reserveList: [],
      isLoading: false,
      disabled: false
    }
  },
  methods: {
    getReserveData () {
      this.$api.reserve.getReserve({ page: 1 })
        .then(this.getReserveDataSucc)
        .catch((e) => { console.log(e) })
    },
    getReserveDataSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK && res.data) {
        const data = res.data
        this.reserveList = data
      }
    },
    onRefresh () {
      setTimeout(() => {
        this.$toast('刷新成功')
        this.getReserveData()
        this.isLoading = false
      }, 500)
    },
    handlerrefresh (pos) {
      this.disabled = pos > 0
    }
  },
  activated () {
    this.getReserveData()
  }
}
</script>

<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.reserve-wrap >>> .van-pull-refresh__track
  width 100%
  height 100%

.reserve-wrap
  .bgc
    background-color $bgcOne
    color($whiteFzClor)
    position relative
    z-index 3

  .pull
    position absolute
    top 0
    left 0
    bottom 0
    right 0
    background-color $bgc
</style>
